<template>
  <div class="wrapper" ref="wrapper">
    <div>
      <!--hot-->
      <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li class="hot-city"
              v-for="(item,index) in hotCities"
              :key="index"
              @click="changeCityName(item.name)"
          >{{item.name}}</li>
        </ul>
      </div>

      <!--sort-->
      <div class="sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
          <li class="sort-city"
              v-for="(val,key) in cities"
              :key="key"
              @click="changeSort(key)"
          >{{key}}</li>

        </ul>
      </div>

      <!--list-->
      <div class="list">
        <div v-for="(val,key) in cities" :ref="key" :key="key">
          <div class="list-title">{{key}}</div>
          <ul class="list-msg">
            <li class="list-city"
                v-for="(item,index) in val"
                @click="changeCityName(item.name)"
            >{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import { mapMutations } from 'vuex'
    export default {
      name: "List",
      props:['cities','hotCities'],

      data() {
        return{
          scroll:''
        }
      },
      mounted() {
        this.scroll = new BScroll(this.$refs.wrapper,{mouseWheel: true,click: true})
      },
      methods:{
        changeSort(sortName){
          this.scroll.scrollToElement(this.$refs[sortName][0])
        },
        changeCityName(cityName){
          this.changeCity(cityName);

          this.$router.push('/')
        },
        ...mapMutations(['changeCity'])
      }
    }
</script>

<style scoped lang="stylus">
  @import "~css/common.styl"
  .wrapper{
    position: absolute;
    bottom:0;
    top:1.5rem;
    overflow: hidden;
    background:#f5f5f5;
  }
  .hot-title {
    font-size: .26rem;
    color: #212121;
    padding: .2rem .3rem;
  }
  .hot-list{
    background-color: #fff;
    font-size:.28rem;
    overflow: hidden;
    position: relative;
  }
  .hot-list:before{
    content: '';
    position: absolute;
    height: 100%;
    width: 33.3333%;
    left: 33.333%;
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
  }
  .hot-city{
    position:relative;
    float: left;
    width: 33.3333%;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
    border-bottom: 1px solid #ddd;
  }
  .sort-title {
    font-size: .26rem;
    color: #212121;
    padding: .2rem .3rem;
  }
  .sort-list{
    background-color: #fff;
    font-size:.28rem;
    overflow: hidden;
    position: relative;
  }
  .sort-city{
    text-align: center;
    float: left;
    width: 16.666%;
    height: .9rem;
    line-height: .9rem;
    padding-top: .1rem;

  }
  .list-title {
    font-size: .26rem;
    color: #212121;
    padding: .2rem .3rem;
  }
  .list-msg{
    background-color: #fff;
    font-size:.28rem;
    overflow: hidden;
    position: relative;
  }
  .list-msg:before{
    content: '';
    position: absolute;
    height: 100%;
    width: 25%;
    left: 25%;
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
  }
  .list-msg:after{
    content: '';
    position: absolute;
    height: 100%;
    width: 0;
    left: 75%;
    border-left:1px solid #ddd;

  }
  .list-city{
    position:relative;
    text-align: center;
    float: left;
    width: 25%;
    line-height: .9rem;
    border-bottom: 1px solid #ddd;
    textOverflow();
  }
</style>
